import React, { memo } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import Swpier from "../../components/Swpier/Index";
import Grid from "../../Components/Gridcom/index";
import { Search } from "react-vant";
import Tabq from "../../components/Tabq/Index";
import style from "./index.module.scss";
import Image1 from "../../image/11.gif";
import Image2 from "../../image/22.gif";
import Image3 from "../../image/33.gif";
const Index: React.FC = memo( () => {
  const joop = useNavigate();
  const fast = () => {
    joop("/fast");
  };
  const doctor = ()=>{
    joop("/look");
  }

  const Deliver=() => {
    joop("/shop");
  }

  const look = () => {
    joop("/look");
  };

  return (
    <div className={style.boxmain}>
      <Search
        shape="round"
        background="#4fc08d"
        value={""}
        onClickInput={() => joop("/shop/shopSerch:item")}
        placeholder="请输入搜索关键词"
      />
      <div className={style.topimg}>
        <div onClick={fast} className={style.left}>
          <img src={Image1} alt="" />
        </div>
        <div className={style.right}>
          <img src={Image2}
          onClick={() => doctor()}
          className={style.img2} alt="" />
          <img 
          src={Image3}
          onClick={() => Deliver()}
          alt="" />
        </div>
      </div>
      <div className={style.swpier}>
        <Swpier></Swpier>
      </div>
      <div className={style.nav}>
        <div className={style.nr}>
          <Grid></Grid>
        </div>
      </div>
      <div className={style.zhuanke}>
        <div className={style.title}>
          <h3>专科门诊</h3>
          <span className={style.span}>春雨高复诊率、高口碑名医</span>
        </div>
        <div className={style.left}>
          <img src="../../img/188D7C7AD88D82257EE15FD1B6103574.png" alt="" />
        </div>
        <div className={style.right}>
          <img src="../../img/C17DAB944A6A5E54585C8577B3D26F5B.png" alt="" />
        </div>
      </div>
      <div className={style.mdoctor}>
        <div style={{ width: "100%" }}>
          <h3 className={style.h3}>精选医生</h3>{" "}
          <b
            onClick={() => look()}
            style={{ float: "right", color: "rgb(179,179,179)" }}
          >
            查看更多
          </b>
        </div>

        <img src="./img/444.png" alt="" />
        <img src="./img/555.png" alt="" />
        <img src="./img/5555.png" alt="" />
        <img src="./img/5555.png" alt="" />
      </div>

      <div className={style.tspf}>
        <h3 style={{ width: "100%" }}>春雨热卖</h3>
        <div className={style.left1}>
          <img onClick={()=>joop('/tu1')} src="./img/E337DC5EF67617322E70FAC678736925_03.gif" alt="" />
          <img onClick={()=>joop('/tu2')} src="./img/E337DC5EF67617322E70FAC678736925_05.gif" alt="" />
        </div>
        <div className={style.left2}>
          <img onClick={()=>joop('/tu3')} src="./img/E337DC5EF67617322E70FAC678736925_09.gif" alt="" />
          <img onClick={()=>joop('/tu4')} src="./img/E337DC5EF67617322E70FAC678736925_10.gif" alt="" />
        </div>

        <div className={style.le}>
          <img onClick={()=>joop('/tu5')} src="./img/E337DC5EF67617322E70FAC678736925_13.gif" alt="" />
          <img src="./img/E337DC5EF67617322E70FAC678736925_15.gif" alt="" />
          <img src="./img/E337DC5EF67617322E70FAC678736925_17.gif" alt="" />
        </div>
      </div>

      <div className={style.tab}>
        <Tabq></Tabq>
      </div>
    </div>
  );
})

export default Index;
